<template>
    <div class="flex flex-col justify-between w-full sm:flex-row">
        <div :class="hasRoles ? 'w-full ml-0 sm:ml-2 mt-2 sm:mt-0' : 'w-full'">
            <Search :search="search" :reset="reset">
                <template v-slot:body>
                    <el-form-item label="企业名称">
                        <el-input v-model="query.company" clearable/>
                    </el-form-item>
                    <el-form-item label="联系人">
                        <el-input v-model="query.username" clearable/>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="query.phone" clearable/>
                    </el-form-item>
                    <el-form-item label="状态">
                        <Select v-model="query.status" clearable api="status"/>
                    </el-form-item>
                </template>
            </Search>
            <div class="table-default">
                <Operate :show="open">
                    <template #operate>
<!--                        <el-button @click="download('/k12user')">导出</el-button>-->
                    </template>
                </Operate>
                <el-table :data="tableData" class="mt-3" v-loading="loading">
                    <el-table-column prop="company" label="企业名称"/>
                    <el-table-column prop="school_name" label="校区"/>
                    <el-table-column prop="username" label="联系人"/>
<!--                    <el-table-column prop="avatar" label="头像">-->
<!--                        <template #default="scope">-->
<!--                            <el-avatar :icon="UserFilled" v-if="!scope.row.avatar"/>-->
<!--                            <el-avatar :src="scope.row.avatar" v-else/>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
                    <el-table-column prop="phone" label="手机号"/>
                    <el-table-column prop="status" label="状态">
                        <template #default="scope">
                            <Status v-model="scope.row.status" :id="scope.row.id" :api="api"/>
                        </template>
                    </el-table-column>
                    <el-table-column prop="expiration_time" label="有效期"/>
                    <el-table-column prop="created_at" label="创建时间"/>
                    <el-table-column label="操作" width="300">
                        <template #default="scope">
                            <el-button size="small" type="primary"
                                       @click="finance_examine(scope.row)">
                                添加校区
                            </el-button>
                            <Update @click="open(scope.row.id)"/>
                            <Destroy @click="destroy(api, scope.row.id)"/>
                        </template>
                    </el-table-column>
                </el-table>

                <Paginate/>
            </div>

            <Dialog v-model="visible" :title="title" destroy-on-close>
                <Create @close="close(reset)" :primary="id" :api="api" :has-roles="hasRoles"/>
            </Dialog>

            <el-dialog
                v-model="examineVisibleFinance"
                :title="title"
                width="40%"
            >
                <el-form :model="examineFormFinance">
                    <el-form-item label="校区名称" prop="name" required>
                        <el-input v-model="examineFormFinance.name" type="text" placeholder="请输入校区名称"/>
                    </el-form-item>
                    <div class="flex justify-end">
                        <el-button type="primary" @click="submitFormFinance(examineFormFinance)">提交</el-button>
                    </div>
                </el-form>

            </el-dialog>
        </div>
    </div>
</template>

<script lang="ts" setup>
// @ts-nocheck
import {computed, onMounted, ref} from 'vue'
import Create from './create.vue'
import {useGetList} from '@/composables/curd/useGetList'
import {useDestroy} from '@/composables/curd/useDestroy'
import {useOpen} from '@/composables/curd/useOpen'
// import Department from './components/department.vue'
import {useUserStore} from '@/stores/modules/user'
import {isUndefined} from '@/support/helper'
import {UserFilled} from '@element-plus/icons-vue'
import {useExcelDownload} from '@/composables/curd/useExcelDownload'
import http from "@/support/http";
import {ElMessage} from "element-plus";

const userStore = useUserStore()

const api = 'k12users'
const {data, query, search, reset, loading} = useGetList(api)
const {destroy, deleted} = useDestroy()
const {open, close, title, visible, id} = useOpen()
const {download} = useExcelDownload()

const tableData = computed(() => data.value?.data)
const hasRoles = ref<boolean>(false)

onMounted(() => {
    search()
    deleted(reset)
    hasRoles.value = !isUndefined(userStore.getRoles)
})

function finance_examine(e) {
    title.value = "添加校区";
    examineVisibleFinance.value = true
    examineFormFinance.value.k12_users=e.id

}
const examineVisibleFinance=ref(false);
const examineFormFinance=ref({
    k12_users: 0,
    status: 1,
})
function submitFormFinance(form) {
    http.post("school/school", form).then(res => {
        if (res.data.code == 10000) {
            examineVisibleFinance.value = false;
            ElMessage.success('添加成功');
            search();
        }
    })
}
</script>
